<template>
  <div>
      <t-dialog
      :header="title"
      :visible.sync="visible"
      @confirm="onConfirm"
      :onConfirm="onConfirmAnother"
      :onCancel="onCancel"
      :onEscKeydown="onKeydownEsc"
      :onCloseBtnClick="onClickCloseBtn"
      :onOverlayClick="onClickOverlay"
      :draggable="true"
      :onClose="close"
      :top="istop"
      width="600px"
      :footer="false"
    >
        <div slot="body">
            <div class="serial-cald">
                <div class="serial">柜号</div>
                <t-input v-model="name" disabled />
            </div>
             <div class="serial-cald">
                <div class="serial">商品</div>
                <t-input v-model="goods" :disabled="isdisabled" />
            </div>
            <div class="serial-cald">
                <div class="serial">商品编号</div>
                <t-input v-model="Productid" :disabled="isdisabled" />
            </div>
            <div class="serial-cald">
                <div class="serial">商品名</div>
                <t-input v-model.number="goodsname" placeholder="请输入折扣" :disabled="isdisabled"/>
            </div>
            
            <div v-if="confirmBody.status == 0">
                <div class="serial-cald">
                    <div class="serial">租借用户</div>
                    <t-input v-model="loanuser" :disabled="isdisabled"/>
                </div>
                <div class="serial-cald">
                    <div class="serial">房间号</div>
                    <t-input v-model="roomnumber" :disabled="isdisabled"/>
                </div>
                <div class="serial-cald">
                    <div class="serial">租借时间</div>
                    <t-input v-model="loantime" :disabled="isdisabled"/>
                </div>
            </div>
            <div class="Rentbounced-btn" v-if="isshow">
                <t-button block theme="primary">损坏申报</t-button>
                <t-button block theme="primary">换新上架</t-button>
                <t-button block theme="primary">确认归还</t-button>
            </div>
            <div class="Rentbounced-btn">
                <t-button block theme="primary" @click="editrent">编辑</t-button>
                <t-button block theme="danger" @click="remorent">删除</t-button>
            </div>
        </div>
    </t-dialog>
  </div>
</template>

<script>
import { Icon } from 'tdesign-icons-vue';
import { IconFont } from 'tdesign-icons-vue';

export default {
    name:'detailsdata',
    props: {
        confirmBody:{
            type: Object || String
        }
    },
    comments: {
       Icon,
       IconFont
    },
    data() {
        return {
            title: '出租详情', // 标题
            visible: false,
            name: '', // 柜号
            goods: '', // 商品
            Productid: '', // 商品编号
            goodsname: '', // 商品名
            loanuser: '', // 租借用户
            roomnumber: '', // 房间号
            loantime: '', // 租借时间
            istop: '', // 距离顶部的距离
            isshow: false, // 是否显示损坏申报
            isdisabled: true, // 是否禁用表单
        };
    },
    created () {
        // 生命周期
        
    },
    watch: {
        confirmBody () {
                    this.name = this.confirmBody.cabinet
                    this.goods = this.confirmBody.cabinet
                    this.Productid = this.confirmBody.Serial
                    this.goodsname = this.confirmBody.name
                    this.loanuser = this.confirmBody.name
                    this.roomnumber = this.confirmBody.cabinet
                    this.loantime = this.confirmBody.time
        },

        // 监听
        visible () {
            this.isdisabled = true;
            if (this.visible) {
                if ( this.confirmBody.status == 0 ) {
                    this.title = '已出租详情';
                    this.istop = '100px';
                    this.isshow = false;
                } else if (this.confirmBody.status == 1) {
                    this.title = '已损坏详情';
                    this.istop = '200px';
                    this.isshow = false;
                } else if (this.confirmBody.status == 2) {
                    this.title = '未出租详情';
                    this.istop = '200px';
                    this.isshow = false;
                } else if (this.confirmBody.status == 3) {
                    this.title = '添加物品';
                    this.istop = '200px';
                    this.isshow = false;
                } else if (this.confirmBody.status == 4) {
                    this.title = '结算中详情';
                    this.istop = '200px';
                    this.isshow = true;
                }
            }
        }
    },
     methods: {
         // 属性点击删除触发的函数
         onIconClose () {

         },

         // 编辑 
         editrent () {
            this.isdisabled = false
         },

         // 删除
         remorent () {
            this.visible = false;
            this.$message.success('删除成功')
            this.$emit('remorent')
         },

        handleSelectAll(checked) {
            this.value1 = checked ? ['选项一', '选项二', '选项三'] : [];
        },

        onConfirm(context) {
            console.log('@confirm与onConfirm任选一种方式即可，其他几个事件类似', context);
            this.visible = false;
        },
        onConfirmAnother(context) {
            console.log('点击了确认按钮', context);
        },
        close(context) {
            console.log('关闭弹窗，点击关闭按钮、按下ESC、点击蒙层等触发', context);
        },
        onCancel(context) {
            console.log('点击了取消按钮', context);
        },
        onKeydownEsc(context) {
            console.log('按下了ESC', context);
        },
        onClickCloseBtn(context) {
            console.log('点击了关闭按钮', context);
        },
        onClickOverlay(context) {
            console.log('点击了蒙层', context);
        },

        // 点击是否推荐触发的函数
        onChange (item) {
            // console.log(item);
            this.recommend = item
        },

        // 商品规格改变触发的函数
        onChange2 (item) {
            console.log(item);
        },

        // 编辑
        editeditor () {
            console.log('编辑');
        },

        // 图片上传触发的函数
        handleFail () {

        }
    },
}
</script>

<style lang="less">
.sweetness {
    margin-top: 10px;
    .label {
        border: 1px solid #999;
        border-radius: 4px;
        margin-left: 6px;
        text-align: center;
    }
    .custom {
        border: 1px solid #999;
        border-radius: 4px;
        margin-left: 6px;
        padding: 0 4px;
    }
}
.t-upload {
    display: inline-block;
}
.originalprice {
    display: flex;
}
.serial-cald {
    padding: 0 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgb(216, 216, 216);
    margin-bottom: 10px;
}
.serial {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 10px;
}
label.t-checkbox {
    display: block;
}

.t-checkbox__label {
    flex-shrink: 0;
}

.attribute-list {
    display: flex;
    .attribute-name {
        li {
            margin-top: 10px;
        }
    }
    .attribute-label {
        margin-left: 10px;
        li {
            border: 1px solid #999;
            border-radius: 4px;
            margin-top: 10px;
        }
    }
}
input {
    font-weight: 500;
}
.Rentbounced-btn {
    display: flex;
    margin-top: 30px;
    button {
        margin-right: 10px;
    }
}
</style>